<template>
    <div>
        <div class="title">
            <h1 class="name">小程序直播</h1>
            <div class="tip" @click="viewGuideHandler">
                <span>查看小程序直播产品使用指南</span>
                <el-icon>
                    <InfoFilled />
                </el-icon>
            </div>
        </div>
        <div class="desc">
            微信小程序直播是基于小程序的实时视频直播工具，帮助商家在自有小程序中实现直播互动与商品销售闭环，提升销售转化率。
        </div>

        <div class="content">
            <div class="content_left">
                <span class="title">功能展示：</span>
                <div class="feat_show">
                    <div class="feat_show_item mr30">
                        <span class="title">主播端</span>
                        <img src="/imgs/anchor_end.jpg" />
                    </div>
                    <div class="feat_show_item">
                        <span class="title">观众端</span>
                        <img src="/imgs/audience_end.jpg" />
                    </div>
                </div>
            </div>
            <div>
                <span class="title">开播流程：</span>
                <div class="text-line">
                    <div>
                        1) 在<span class="text-btn" @click="openWxAdminHandler">微信小程序后台</span>开通直播功能；
                    </div>
                    <div>
                        2) 在<span class="text-btn" @click="openLiveAdminHandler">直播管理后台</span
                        >添加成员、导入直播商品、创建直播间；
                    </div>
                    <div>3) 主播扫描直播间”开播码“登录主播端，开始直播。</div>
                </div>
                <div class="title mt24 mb13">如何将直播入口添加至商城小程序？</div>
                <div class="text-line">
                    <div>
                        1) 在<span class="text-btn" @click="openLiveAdminHandler">直播管理后台</span
                        >直播间“分享”弹窗中，复制直播间路径；
                    </div>
                    <div>2) 在商城装修中添加图片广告组件，跳转页面选择自定义路径，完成直播间路径配置即可。</div>
                </div>
                <el-button class="create-btn" type="primary" @click="onCreate">创建直播</el-button>
            </div>
        </div>

        <ConfirmDialog :data="confirmDialogProps" @confirm="onConfirm">
            <template #content>
                <div v-for="(item, index) in confirmDialogProps.contentArr" :key="`k${index}`">{{ item }}</div>
            </template>
        </ConfirmDialog>
    </div>
</template>
<script setup>
import ConfirmDialog from '@/components/ConfirmDialog.vue';
import request from '@/request';
import { isObject } from '@/commons/utils';
import { ElMessage } from 'element-plus';
import { reactive } from 'vue';
const viewGuideHandler = () => {
    window.open('https://docs.qq.com/slide/DSkN3dXRoam5ycGFV');
};

const openWxAdminHandler = () => {
    window.open('https://mp.weixin.qq.com/');
};

const openLiveAdminHandler = () => {
    window.open('https://live.weixin.qq.com/livemp/login');
};
const confirmDialogProps = reactive({
    title: '提示',
    width: '460px',
    content: '',
    contentArr: [],
    textAlign: 'left',
    show: false,
    url: '',
    confirmText: '去开通',
    cancelText: '取消'
});

const onConfirm = () => {
    window.open(confirmDialogProps.url);
};

const onCreate = async () => {
    try {
        const res = await request('getCheckLiveStatusServ');
        const url = {
            2005013: location.origin + '/mp/info',
            2005014: 'https://mp.weixin.qq.com/',
            2005015: 'https://live.weixin.qq.com/livemp/login'
        };
        if (res.code == 0) {
            openLiveAdminHandler();
        } else if (res.code == 2005013) {
            Object.assign(confirmDialogProps, {
                url: url[res.code],
                textAlign: 'center',
                confirmText: '去授权',
                contentArr: ['尚未授权小程序，请授权后再创建直播间。'],
                show: true
            });
        } else if (res.code == 2005014) {
            Object.assign(confirmDialogProps, {
                url: url[res.code],
                textAlign: 'center',
                confirmText: '去开通',
                contentArr: ['尚未开通小程序直播功能，请开通后再创建直播间。'],
                show: true
            });
        } else if (res.code == 2005015) {
            Object.assign(confirmDialogProps, {
                url: url[res.code],
                textAlign: 'left',
                confirmText: '继续创建',
                contentArr: [
                    '当前小程序版本尚未添加直播组件，用户无法观看直播。',
                    '下次发布小程序时系统将自动添加直播组件。'
                ],
                show: true
            });
        }
    } catch (error) {
        if (isObject(error)) {
            ElMessage.error(error.msg);
        }
    }
};
</script>
<style lang="scss" src="./style.scss" scoped></style>
